<div>
  <hot-table
    class="hot"
    [data]="dataset"
    height="340"
    width="800"
    [colHeaders]="colHeaders"
    [rowHeaders]="true"
    [dropdownMenu]="true"
    [hiddenColumns]="hiddenColumns"
    [contextMenu]="true"
    [multiColumnSorting]="true"
    [filters]="true"
    [autoWrapRow]="true"
    [autoWrapCol]="true"
    headerClassName="htLeft"
    [beforeRenderer]="addClassesToRows"
    licenseKey="non-commercial-and-evaluation"
  >
    <hot-column data="id" type="numeric" [width]="150"></hot-column>
    <hot-column
      data="itemName"
      type="text"
      headerClassName="htLeft"
      className="htLeft"
      [width]="150"
    ></hot-column>
    <hot-column
      data="itemNo"
      type="text"
      headerClassName="htLeft"
      className="htLeft"
      [width]="150"
    ></hot-column>
    <hot-column
      data="leadEngineer"
      type="text"
      headerClassName="htLeft"
      className="htLeft"
    ></hot-column>
    <hot-column
      data="cost"
      type="numeric"
      headerClassName="htRight"
      className="htRight"
    ></hot-column>
    <hot-column
      data="inStock"
      type="checkbox"
      className="htCenter"
      headerClassName="htCenter"
    ></hot-column>
    <hot-column
      data="category"
      type="text"
      headerClassName="htLeft"
      className="htLeft"
    ></hot-column>
    <hot-column
      data="itemQuality"
      type="text"
      headerClassName="htLeft"
      className="htLeft"
    ></hot-column>
    <hot-column
      data="origin"
      type="text"
      headerClassName="htLeft"
      className="htLeft"
    ></hot-column>
    <hot-column
      data="quantity"
      type="numeric"
      headerClassName="htRight"
      className="htRight"
    ></hot-column>
    <hot-column
      data="valueStock"
      type="numeric"
      headerClassName="htRight"
      className="htRight"
    ></hot-column>
    <hot-column
      data="repairable"
      type="checkbox"
      className="htCenter"
      headerClassName="htCenter"
    ></hot-column>
    <hot-column
      data="supplierName"
      type="text"
      headerClassName="htLeft"
      className="htLeft"
    ></hot-column>
    <hot-column
      data="restockDate"
      type="date"
      [allowInvalid]="false"
      headerClassName="htLeft"
      className="htLeft"
    ></hot-column>
    <hot-column
      data="operationalStatus"
      type="text"
      headerClassName="htLeft"
      className="htLeft"
    ></hot-column>
  </hot-table>
</div>
